{extend name=".././view/list.html" /}
{block name="jsset"}
{/block}
{block name="nav"}
<span class="layui-breadcrumb">
  <a href="">系统管理</a>
  <a href="">教务管理</a>
  <a><cite>教室列表</cite></a>
</span>
{/block}
{block name="search"}
<div class="layui-form-item" style="margin-bottom: 0;">
  <label for="searchval" class="layui-form-label">
    关键字
  </label>
  <div class="layui-input-block">
    <input type="text" id="searchval" name="searchval" autocomplete="off" class="layui-input" placeholder="输入关键字并回车">
  </div>
</div>
<div class="layui-form-item">
  <div class="layui-inline">
    <label for="title" class="layui-form-label">
      时间
    </label>
    <div class="layui-input-inline">
      <input type="text" class="layui-input layui-input-date" id="bfdate" name="bfdate" placeholder="" value="" autocomplete="off" lay-filter="riqi">
    </div>
    <div class="layui-input-inline">
      <input type="text" class="layui-input layui-input-date" id="enddate" name="enddate" placeholder="" value="" autocomplete="off" lay-filter="riqi">
    </div>
  </div>
</div>
<div class="layui-form-item" style="text-align: right;">
  <button class="layui-btn" lay-filter="searchSubmit" lay-submit="">搜索</button>
</div>
{/block}
{block name="table"}
<table id="tabledemo" lay-filter="mytable" lay-size="sm"></table>
{/block}
{block name="myjs"}
<!-- 表格上面按钮模板 -->
<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-danger" lay-event="dels">
      <i class="iconfont">&#xe69d;</i> 批量删除
    </button>
    <button class="layui-btn" lay-event="add">
      <i class="iconfont">&#xe6b9;</i> 添加
    </button>
  </div>
</script>
<!-- 记录操作按钮模板 -->
<script type="text/html" id="barDemo">
  <a class="layui-btn-xs" lay-event="edit" title="编辑"><i class="layui-icon">&#xe642;</i></a>
  <a class="layui-btn-xs" lay-event="del" title="删除"><i class="layui-icon">&#xe640;</i></a>
</script>
<!-- 表格操作 -->
<script>
// 提交搜索条件后重载表格
layui.use(['table', 'mytable', 'laydate', 'form'], function() {
  var table = layui.table,
    mytable = layui.mytable,
    form = layui.form,
    laydate = layui.laydate;

  // 设置列
  options.cols = [
    [ //表头
      { type: 'checkbox', fixed: 'left' },
      { field: 'id', title: 'ID', sort: true, width: 80 },
      { field: 'title', title: '名称', sort: true, minWidth: 240 },
      { field: 'weizhi', title: '位置', sort: true, minWidth: 100 },
      {
        field: "category_id",
        title: '类别',
        sort: true,
        templet: function(d) {
          var str = '';
          if (d.crCategory) {
            str = d.crCategory.title;
          }
          return str;
        }
      },
      { field: 'shangke', title: '是否可以上课', sort: true, minWidth: 60 },
      { field: 'beizhu', title: '备注', sort: false },
      { field: 'status', title: '状态', templet: '#status', sort: true },
      { field: 'id', title: '操作', toolbar: '#barDemo', minWidth: 140 }
    ]
  ];

  // 获取筛选条件并加载表格
  options.where = form.val("search");
  userTable = table.render(options); //获取数据并渲染

  //表头工具栏事件
  table.on('toolbar(mytable)', function(obj) {
    switch (obj.event) {
      case 'dels':
        var checkStatus = table.checkStatus('mytable'); //idmytable 即为基础参数 id 对应的值
        mytable.delAll(checkStatus, 'classroom/delete', 'mytable');
        break;
      case 'add':
        xadmin.open('添加教室', 'classroom/create', '650', '350', false);
        break;
    };
  });

  //监听行工具条
  table.on('tool(mytable)', function(obj) {
    var data = obj.data; //获得当前行数据
    var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
    var tr = obj.tr; //获得当前行 tr 的DOM对象
    switch (layEvent) {
      case 'detail': // 查看
        layer.msg('查看' + data.id);
        break;
      case 'del': // 删除
        mytable.del(obj, "classroom/delete");
        break;
      case 'edit': // 编辑
        xadmin.open('编辑教室', 'classroom/edit/' + obj.data.id, '650', '450', false);
        break;
    };
  });
});

</script>
{/block}
